<template>
	<view class="login">
		<view class="head">
			<view class="head-title">
				欢迎来到 <text class="bd-text">简学</text>
			</view>
			<view class="head-des">
				让学习更快乐
			</view>
		</view>
		<view class="loginForm">
			<u-form :model="loginForm" ref="uForm" class="form">
				<u-form-item prop="username" left-icon="account" :left-icon-style="iconStyle">
					<u-input class="input" placeholder-style="padding: 0 20upx;color:#ccc;" v-model="loginForm.username" />
				</u-form-item>
				<u-form-item prop="password" left-icon="lock-open" :left-icon-style="iconStyle">
					<u-input class="input" placeholder-style="padding: 0 20upx;color:#ccc;" type="password" v-model="loginForm.password" />
				</u-form-item>
			</u-form>
			<u-button class="btn-submit" @click="loginSubmit" type="warning" shape="circle">登录</u-button>
			<view class="forget-or-reg">
				<text>用户注册</text> <text class="line">|</text> <text>忘记密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data(){
			return {
				loginForm: {
					username: '',
					password: ''
				},
				iconStyle: {
					color: '#F8B551',
					fontSize: '40upx'
				},
				rules: {
					username: [
						{ 
							required: true, 
							message: '请输入账号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					password: [
						{
							required: true, 
							message: '请输入密码', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							min: 6, 
							message: '不能少于5个字符', 
							trigger: 'change'
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async loginSubmit(){
				console.log(this.loginForm, "loginSubmit");
				// 调用登录接口
				const data = await this.$u.api.loginShop(this.loginForm);
				
				console.log(data, "店铺登录data");
				this.$u.toast(data.msg);
				if(data.code === 200){
					localStorage.setItem("jtoken", data.data.token);
					this.$store.commit("saveUserInfo", data.data.user);
					setTimeout(() => {
						this.$Router.push('/pages/home/home');
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background: url(../../static/img/login_bg.png);
		background-size: 100% 100%;
		min-height: 100vh;
		color: #E7E7EF;
		.head {
			width: 100%;
			margin: 0 auto;
			text-align: center;
			padding-top: 140upx;
			.head-title {
				font-size: 32upx;
				letter-spacing: 20upx;
				font-weight: bolder;
				.bd-text {
					font-size: 40upx;
					color: #fff;
				}
			}
			.head-des {
				font-family: Adobe Heiti Std R;
				margin-top: 40upx;
				letter-spacing: 8upx;
				color: #fff;
				font-size: 28upx;
			}
		}
	}
	.loginForm {
		width: 80%;
		margin: 0 auto;
		margin-top: 300upx;
		.form {
			width: 80%;
			margin: 0 auto;
		}
	}
	.btn-submit {
		margin-top: 80upx;
	}
	.forget-or-reg {
		display: flex;
		justify-content: center;
		margin-top: 20upx;
		color: #fff;
		.line {
			margin: 0 20upx;
		}
	}
	
	.input {
		border: 2upx solid #fff;
		border-radius: 100upx;
		// padding: 10upx 20upx;
	}
	/deep/.uni-input-input {
		// padding: 0 20upx;
		padding-left: 20upx;
	}
	/deep/.u-input__right-icon{
		margin-right: 16upx;
	}
</style>
